Skip to content

Comments

Light Mode + OKLCH#3061

Merged
david-crespo merged 15 commits intomainfrom
light-mode
Feb 24, 2026
Merged

Light Mode + OKLCH#3061
david-crespo merged 15 commits intomainfrom
light-mode

Conversation

@benjaminleonard
Copy link
Contributor

@benjaminleonard benjaminleonard commented Feb 9, 2026

Bump @oxide/design-system to v5 and add light mode support.

Including:

  • New OKLCH-based color palette
  • Updated color steps (200–1300) to accomodate light mode
  • Theme picker in the top bar — users can choose dark, light, or system preference; the choice is persisted to localStorage
  • data-theme attribute applied to the document root via useApplyTheme for theme support
  • index.html script to set theme before first paint to prevent flash
  • Updated CSS throughout to improve components that are improved by light: overrides (tabs, buttons, checkboxes, radios, dropdowns, etc.)

@vercel
Copy link

vercel bot commented Feb 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
console Ready Ready Preview Feb 23, 2026 11:59pm

Request Review

@benjaminleonard benjaminleonard marked this pull request as ready for review February 23, 2026 18:17
@benjaminleonard
Copy link
Contributor Author

@charliepark @david-crespo Ready for your perusal!

@david-crespo
Copy link
Collaborator

The arrow being on the right instead of the left is a little silly — maybe it doesn't need an arrow? Or maybe there's a more directionally neutral indicator?

image

@david-crespo
Copy link
Collaborator

The light badge feels either too low-contrast or the background is just too bright — it stands out in a way that feels meaningful but isn't. The contrast is not so bad it violates a11y rules, but it's just barely over the 4.5 line for AA.

image

The Base UI migration put z-index on Menu.Popup, a child of the
positioned Menu.Positioner. Since the positioner had no z-index, it
sat at auto in the stacking context, below the sticky pagination bar
(z-index 15). Row action dropdowns near the bottom of a table were
unclickable because the pagination intercepted pointer events.
@david-crespo
Copy link
Collaborator

17bee1f fixes the failing e2e by fixing this.

image

@david-crespo
Copy link
Collaborator

david-crespo commented Feb 23, 2026

Overall I LOVE the new colors. It's a subtle change but it feels fantastic.


Preview banner feels a little saturated, but maybe I'm just not used to it.

image

The text in the first two columns feels too light — it doesn't feel like there's a reason for it to be lighter than the links. Maybe it's that darkening is not usually what you do for emphasizing a link. I feel like you're more likely to see it lightened (or tinted of course). The contrast between the table header and the background is also kind of low, feels a little muddy.

image

@david-crespo
Copy link
Collaborator

I thought we had introduced a problem with the color of the loading bar, but it turns out that we actually already had a pretty big problem with the color of the loading bar, and I just didn't realize because my Firefox has dark UI chrome.

The loading bar is only visible properly when both the chrome and the page theme match. When one is dark and the other is light, the loading bar is lost visually somehow in boundary.

2026-02-23-loading-bar-light-chrome.mp4
2026-02-23-loading-bar-dark-chrome.mp4

@david-crespo david-crespo merged commit 06c6d62 into main Feb 24, 2026
7 checks passed
@david-crespo david-crespo deleted the light-mode branch February 24, 2026 04:42
@david-crespo david-crespo mentioned this pull request Feb 24, 2026
6 tasks
@benjaminleonard
Copy link
Contributor Author

Wonderful, will get to the polish issues in due course

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants